import React, {Component} from 'react';
import {getEmailCode, register, checkEmailIsVlidate} from "../../api/user";

class Register extends Component {

    /*在react里面收集表单信息有如下几步：
    *
    * */
    constructor(props) {
        super(props);

        /*
        * react表单收集的第一步：
        *
        * 在state里面初始化相关的数据信息
        * */
        this.state = {
            username: '',
            password: '',
            repassword: '',
            email: '',
            code: '',
        }

    }

    usernameHandler = (e) => {
        this.setState({
            username: e.target.value,
        })
    }

    passwordHandler = (e) => {
        this.setState({
            password: e.target.value,
        })
    }

    repasswordHandler = (e) => {
        this.setState({
            repassword: e.target.value,
        })
    }

    emailHandler = (e) => {
        this.setState({
            email: e.target.value,
        })
    }

    codeHandler = (e) => {
        this.setState({
            code: e.target.value,
        })
    }

    getCode = async (e) => {
        e.preventDefault();
        // 调用发送验证码的接口获取code
        console.log('getCode');
        if (this.state.email == '') {
            alert('请输入注册邮箱！');
            return false;
        }

        let data = {email: this.state.email};

        let info = await getEmailCode(data);
        console.log(info);
        if (info.data.statusCode == 200) {
            alert('邮件发送成功！');
        } else {
            alert('系统繁忙！');
        }

    }

    checkEmailIsVlidate = async () => {
        let email = this.state.email;
        if (email == '') {
            alert('请输入邮箱!');
            return false;
        }
        // 验证是否是邮箱 可以编写一个正则实现
        let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (!reg.test(email)) {
            alert('请输入一个合法的邮箱！');
            return false;
        }
        // 邮箱是合法的

        let info = await checkEmailIsVlidate(email);
        console.log(info);
        if (info.data.statusCode == 403) {
            // 邮箱已被人注册
            alert(info.data.message);
            return false;
        } else if (info.data.statusCode == 200) {
            // 可以注册;
            console.log('可以注册');
        } else {
            alert('系统繁忙！');
            return false;
        }
    }

    registerhandler = async (e) => {
        e.preventDefault(); // 阻止默认事件，然后我们使用ajax进行异步提交
        console.log('registerhandler');
        console.log(this.state);

        let userInfo = {
            "name": this.state.username,
            "email": this.state.email,
            "password": this.state.password,
            "code": this.state.code,
        };
        let info = await register(userInfo);
        console.log(info);
        if (info.data.statusCode == 200) {
            alert('注册成功！');
        } else {
            alert('注册失败！');
        }

    }

    render() {
        return (
            <div>
                <h1>注册组件-页面级别</h1>
                <p>
                    在react 里面，表单控件的 value 如果是收到组件的 state 进行控制，只有 state 变化了，表单控件的value才能变化，那么这样的组件我们称之为 受控组件。
                </p>
                <form action="">
                    <div>

                        用户名：<input type="text" value={this.state.username} onChange={this.usernameHandler}/>
                    </div>
                    <div>
                        {/*需求：在注册的时候，我们判断一下邮箱是否可以使用，如果之前被注册了，则就不能在使用了。 调用一个后台提供的验证接口进行验证操作  checkEmailIsVlidate */}
                        邮箱：<input type="text" value={this.state.email} onChange={this.emailHandler}
                                  onBlur={this.checkEmailIsVlidate}/>
                    </div>
                    <div>
                        验证码：<input type="text" value={this.state.code} onChange={this.codeHandler}/>
                        <button onClick={this.getCode}>点击获取验证码</button>
                    </div>
                    <div>
                        密码：<input type="password" value={this.state.password} onChange={this.passwordHandler}/>
                    </div>
                    <div>
                        确认密码：<input type="password" value={this.state.repassword} onChange={this.repasswordHandler}/>
                    </div>
                    <div>
                        <button onClick={this.registerhandler}>注册</button>
                    </div>
                </form>
            </div>
        );
    }
}

export default Register;
